<template>
	<view class="big-box">
		<em-top title="账号安全"></em-top>
		<view class="box-con">
			<view class="box-ul">
				<!-- <view class="box-li" @click="personalDetail">
					<image src="../static/mine1.png" mode="widthFix"></image>
					<view>个人信息</view>
					<image src="../../static/back-black.png" mode="widthFix" class="nexts"></image>
				</view> -->
				<view class="box-li" @click="changeMobile">
					<image src="../static/mine2.png" mode="widthFix"></image>
					<view>手机号码管理</view>
					<image src="../../static/back-black.png" mode="widthFix" class="nexts"></image>
				</view>
				<view class="box-li" @click="changeMobile('password')">
					<image src="../static/changePassword.png" mode="widthFix"></image>
					<view>修改密码</view>
					<image src="../../static/back-black.png" mode="widthFix" class="nexts"></image>
				</view>
				<view class="box-li" @click="logOff">
					<image src="../static/mine3.png" mode="widthFix"></image>
					<view>账户注销</view>
					<image src="../../static/back-black.png" mode="widthFix" class="nexts"></image>
				</view>
			</view>
			<view class="logout-btn">
				<u-button type="primary" text="退出登录" @click="logOut"
					:customStyle="{fontSize: '32rpx', height: '100rpx', background: '#037AFF'}"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile: ''
			}
		},
		onLoad() {
			this.mobile = uni.getStorageSync('userInfos').mobile
		},
		methods: {
			gotoPage(url) {
				uni.navigateTo({
					url: url,
				})
			},
			logOut() {
				uni.showModal({
					content: '是否退出登录?',
					success: (res) => {
						if (res.confirm) {
							uni.clearStorage()
							uni.reLaunch({
								url: '/pages/login/login',
							})
						}
					}
				})
			},
			logOff() {
				uni.showModal({
					title: '确认账户注销',
					content: '确定注销账号？需要通过手机号码验证，通过后注销，注销后账号内容清空',
					cancelText: '我再想想',
					confirmText: '确认注销',
					success: (res) => {
						if (res.confirm) {
							this.gotoPage('/personalCenter/personChild/logOff')
						}
					}
				})
			},
			personalDetail() {
				this.gotoPage('/samplePages/person/personalDetail')
			},
			changeMobile(text) {
				// let reg = /^(1[3-9][0-9])\d{4}(\d{4}$)/; // 定义手机号正则表达式
				// let value = this.mobile.replace(reg, '$1****$2');
				// let value = this.mobile
				if (text == 'password') {                    this.gotoPage('/personalCenter/personChild/changePassword')
					// uni.showModal({
					// 	title: '是否修改密码',
					// 	content: '修改密码' + value + '将重新登录',
					// 	cancelText: '我再想想',
					// 	confirmText: '确认更换',
					// 	success: (res) => {
					// 		if (res.confirm) {
					// 			this.gotoPage('/personalCenter/personChild/changePassword')
					// 		}
					// 	}
					// })
				} else {                    this.gotoPage('/personalCenter/personChild/changeMobile')
					// uni.showModal({
					// 	title: '确认更换手机号',
					// 	content: '确定更换手机号码' + value + '将不能用于登录',
					// 	cancelText: '我再想想',
					// 	confirmText: '确认更换',
					// 	success: (res) => {
					// 		if (res.confirm) {
					// 			this.gotoPage('/personalCenter/personChild/changeMobile')
					// 		}
					// 	}
					// })
				}

			}
		},
	}
</script>

<style lang="less" scoped>
	.big-box {
		position: relative;
		// background: url(/static/login/bg.jpg) no-repeat center;
		background-size: 100% 100%;
		height: auto;
		min-height: 100vh;

		.box-con {
			padding: 30rpx;

			.box-ul {
				background: #FFFFFF;
				border-radius: 22rpx;
				font-size: 32rpx;
				color: #333333;
				padding: 2rpx 20rpx;

				.box-li {
					margin: 60rpx 0;
					display: flex;
					align-items: center;

					image {
						width: 48rpx;
					}

					view {
						margin-left: 10rpx;
					}

					.nexts {
						width: 36rpx;
						transform: rotate(180deg);
						margin-left: auto;
					}
				}
			}

			.logout-btn {
				margin: 380rpx 30rpx 0;
			}
		}
	}
</style>